﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPageVue.cshtml";
}

@this.Partial("Index-js")

<div id="app" class="topPanel">
    <div class="toolbar">
        <div class="btn-group">
            <a class="btn btn-primary" onclick="$hits.reload()"><span class="glyphicon glyphicon-refresh"></span></a>
        </div>
        <div class="btn-group">

            <button class="btn btn-primary" v-bind:disabled="Disabled()" v-on:click="Edit"><i class="fa fa-pencil-square-o"></i>修改菜单</button>
            <button class="btn btn-primary" v-bind:disabled="Disabled()" v-on:click="Delete"><i class="fa fa-trash-o"></i>删除菜单</button>
            <button class="btn btn-primary" v-on:click="Add"><i class="fa fa-plus"></i>新建菜单</button>
        </div>
    </div>
    <div class="search">
        <table>
            <tr>
                <td>
                    <div class="input-group">
                        <input id="txt_keyword" type="text" class="form-control" placeholder="请输入要查询关键字" style="width: 400px;" v-model="SearchModel.keyword">
                        <span class="input-group-btn">
                            <button id="btn_search" type="button" class="btn  btn-primary" v-on:click="Search"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>


<div id="table" class="table-responsive" v-cloak>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>名称</th>
                <th>连接</th>
                <th>打开方式</th>
                <th>菜单</th>
                <th>展开</th>
                <th>公共</th>
                <th>有效</th>
                <th>排序</th>
                <th>介绍</th>
            </tr>
        </thead>

        <tbody>
            <tr v-for="(item,index) in Models" :class="{'warning':SelectedModel == item}" v-on:click="SelectRow(item)" :id="item.Id" v-bind:level="item.Level" v-bind:parent-id=" item.ParentId">
                <td>
                    <span v-html="appendRetract(item.Level)"></span>
                    <div v-if="item.HasChildren" v-on:click="expandChildren($event.currentTarget)" style="left:0px;cursor:pointer;" class="glyphicon glyphicon-triangle-bottom"></div>
                    <div v-if="!item.HasChildren" style="width:12px;height:12px;display:inline-block;"></div>

                    {{item.Data.Name}}
                </td>
                <td>{{ item.Data.UrlAddress }}</td>
                <td>{{ item.Data.OpenTarget | Target }}</td>
                <td><span :class="{'badge badge-primary':item.Data.IsMenu,'badge badge-danger':!item.Data.IsMenu}">@*<i :class="{'fa fa-play':item.Data.IsMenu,'fa fa-stop':!item.Data.IsMenu}"></i>*@  {{ GetYesOrNo(item.Data.IsMenu) }}</span></td>
                <td><span :class="{'badge badge-primary':item.Data.IsExpand,'badge badge-danger':!item.Data.IsExpand}">@*<i :class="{'fa fa-play':item.Data.IsExpand,'fa fa-stop':!item.Data.IsExpand}"></i>*@  {{ GetYesOrNo(item.Data.IsExpand) }}</span></td>
                <td><span :class="{'badge badge-primary':item.Data.IsPublic,'badge badge-danger':!item.Data.IsPublic}">@*<i :class="{'fa fa-play':item.Data.IsPublic,'fa fa-stop':!item.Data.IsPublic}"></i>*@  {{ GetYesOrNo(item.Data.IsPublic) }}</span></td>
                <td><span :class="{'badge badge-primary':item.Data.IsEnabled,'badge badge-danger':!item.Data.IsEnabled}">@*<i :class="{'fa fa-play':item.Data.IsEnabled,'fa fa-stop':!item.Data.IsEnabled}"></i>*@  {{ GetYesOrNo(item.Data.IsEnabled) }}</span></td>
                <td>{{ item.Data.SortCode }}</td>
                <td>{{ item.Data.Description }}</td>
            </tr>
        </tbody>
    </table>
</div>
@this.Partial("_Modal")
<modal id="frmEdit" v-show="IsShow" v-on:close="IsShow = false" v-on:save="Save" v-cloak>
    <div slot="header">
        <h3>{{ Title }}</h3>
    </div>
    <div slot="body" class="modal-body">
        <form id="form1">
            <table class="form">
                <tr>
                    <td class="formTitle">上级</td>
                    <td class="formValue">

                        <select id="ParentId" name="ParentId" class="form-control" v-model="Model.ParentId">

                            <option v-for="pitem in Menus" v-bind:value="pitem.id">
                                {{ pitem.text }}
                            </option>
                        </select>
                    </td>
                    <td class="formTitle">名称</td>
                    <td class="formValue">
                        <input id="Name" name="Name" type="text" class="form-control required" placeholder="请输入名称" v-model="Model.Name" />
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">连接</td>
                    <td class="formValue">
                        <input id="UrlAddress" name="UrlAddress" type="text" class="form-control" v-model="Model.UrlAddress" />
                    </td>
                    <td class="formTitle">打开方式</td>
                    <td class="formValue">
                        <select id="OpenTarget" name="OpenTarget" class="form-control required" v-model="Model.OpenTarget">
                            <option value="" >--请选择--</option>
                            <option value="expand" title="expand">无页面</option>
                            <option value="iframe" title="iframe">框架页</option>
                            <option value="default" title="open">内容页</option>
                            <option value="blank" title="blank">新窗口</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="formTitle">图标</td>
                    <td class="formValue">
                        <div class="input-group">
                            <input id="Icon" name="Icon" type="text" class="form-control" v-model="Model.Icon">
                            <span class="input-group-btn">
                                <a class="btn  btn-primary"><i class="fa fa-ellipsis-h"></i></a>
                            </span>
                        </div>
                    </td>
                    <td class="formTitle">排序</td>
                    <td class="formValue">
                        <input id="SortCode" name="SortCode" type="number" min="-1" class="form-control" placeholder="请输入排序" v-model="Model.SortCode" />
                    </td>
                </tr>
                <tr>
                    <td class="formTitle" style="height: 35px;">选项</td>
                    <td class="formValue" colspan="3" style="padding-top: 1px;">
                        <div class="ckbox"> 
                            <input id="IsMenu" name="IsMenu" type="checkbox" v-model="Model.IsMenu"><label for="IsMenu">菜单</label>
                        </div>
                        <div class="ckbox">
                            <input id="IsPublic" name="IsPublic" type="checkbox" v-model="Model.IsPublic"><label for="IsPublic">公共</label>
                        </div>
                        <div class="ckbox">
                            <input id="IsExpand" name="IsExpand" type="checkbox" v-model="Model.IsExpand"><label for="IsExpand">展开</label>
                        </div>
                        <div class="ckbox">
                            <input id="IsEnabled" name="IsEnabled" type="checkbox" v-model="Model.IsEnabled"><label for="IsEnabled">有效</label>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td class="formTitle" valign="top" style="padding-top: 5px;">
                        介绍
                    </td>
                    <td class="formValue" colspan="3">
                        <textarea id="Description" name="Descriptions" class="form-control" style="height: 100px;" v-model="Model.Description"></textarea>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</modal>
 